<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-04-23 15:41:20
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2025-02-05 17:29:13
 * @FilePath: /vue3-admin/src/views/system/UsersManage/UsersManage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script lang="ts" setup>
import CustomCard from '@/components/ui/CustomCard/CustomCard.vue';
import { useTable } from './useTable';
import { useEnum } from '@/service/useEnum';
import EditView from './components/EditView/EditView.vue';

const {
    list,
    listParam,
    total,
    statusTypes,
    roleTypes,
    deptTreeItems,
    deptCascaderProps,
    loading,
    getList,
    reset,
    handleEdit,
    editShow,
    editId,
    afterUpdate
} = useTable();

const { getLabelByValue } = useEnum();
</script>

<template>
    <div class="page-container">
        <CustomCard title="" :canCollapse="false">
            <el-form class="mb" inline>
                <el-form-item label="用户名">
                    <el-input
                        v-model="listParam.username"
                        placeholder="请输入用户名"
                    />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="listParam.status" clearable>
                        <el-option
                            v-for="(item, index) in statusTypes"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="listParam.roleId" clearable>
                        <el-option
                            v-for="(item, index) in roleTypes"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="科室">
                    <el-cascader
                        v-model="listParam.departmentId"
                        :options="deptTreeItems"
                        :props="deptCascaderProps"
                        clearable
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.stop="getList"
                        >确定</el-button
                    >
                    <el-button @click.stop="reset">重置</el-button>
                    <el-button type="success" @click.stop="() => handleEdit()"
                        >新增</el-button
                    >
                </el-form-item>
            </el-form>

            <el-table :data="list" :loading="loading" border>
                <el-table-column label="ID" prop="id" />
                <el-table-column label="用户名" prop="username" />
                <el-table-column label="是否生效">
                    <template #default="scoped">
                        <div>
                            {{ scoped.row.valid ? '是' : '否' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="角色">
                    <template #default="scoped">
                        <div>
                            {{
                                scoped.row.roleList &&
                                scoped.row.roleList.length > 0
                                    ? getLabelByValue(
                                          roleTypes,
                                          scoped.row.roleList[0].id
                                      )
                                    : '暂无'
                            }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="所属科室">
                    <template #default="scoped">
                        <div>
                            {{
                                scoped.row.departmentList &&
                                scoped.row.departmentList.length > 0
                                    ? scoped.row.departmentList[0].name
                                    : '暂无'
                            }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="更新时间">
                    <template #default="scoped">
                        <div>
                            {{ scoped.row.updateTime }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scoped">
                        <div class="flex-row jc-center">
                            <el-button
                                type="primary"
                                @click.stop="() => handleEdit(scoped.row.id)"
                                >编辑</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <Pagination
                :total="total"
                v-model:page="listParam.current"
                v-model:limit="listParam.size"
                @pagination="getList"
            />

            <EditView
                v-model="editShow"
                :id="editId"
                @after-submit="afterUpdate"
            />
        </CustomCard>
    </div>
</template>
